<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button type="primary">查看单据</el-button>
        <!-- <el-button @click="exportExcel">导出</el-button> -->
        <el-button>打印(P)</el-button>
        <el-checkbox v-model="queryData.isShowHcdj">{{ queryData.isShowHcdj ? '隐藏' : '显示' }}红冲单据</el-checkbox>
      </div>
      <div class="btn_right">
        <el-input v-model="queryData.searchValue" placeholder="请输入往来单位名称\拼音码\编码搜索"></el-input>
        <el-button type="primary" @click="onQuery">搜索</el-button>
        <el-button @click="onRefresh">刷新</el-button>
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_table">
        <div class="div_screen">
          <div class="screen_left">
            <div>
              <p>物流公司</p>
              <el-select placeholder v-model="queryData.wlgs">
                <el-option
                  v-for="item in wlgsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div>
              <p>经手人</p>
              <el-select placeholder v-model="queryData.jsr">
                <el-option
                  v-for="item in jsrOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div>
              <p>物流单号</p>
              <input type="text" v-model="queryData.wldh" />
            </div>
            <div>
              <p>过滤记录</p>
              <el-select placeholder v-model="queryData.gljl">
                <el-option
                  v-for="item in gljlOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="left_span">
              <span>此前应收款：</span>
              <span>¥5000.00</span>
              <span>此前应付款：</span>
              <span>¥2000.00</span>
              <span>此前余额：</span>
              <span>¥3000.00</span>
            </div>
          </div>
          <div class="screen_right">
            <el-select @change="changeDate" v-model="monthValue">
              <el-option
                v-for="item in monthOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <!-- <div class="date_picker_style" v-if="isShowDate">
              <p>{{ queryData.dateRange.startDate }}~{{ queryData.dateRange.endData }}</p>
              <el-date-picker
                v-model="nowDate"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onClickPicker"
              >
              </el-date-picker>
              <i class="el-icon-date"></i>
            </div>-->
            <el-date-picker
              v-if="isShowDate"
              v-model="nowDate"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onClickPicker"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <el-button type="primary" @click="onQuery">查询</el-button>
          </div>
        </div>
        <div class="table_content">
          <el-table
            show-summary
            :summary-method="getSummaries"
            highlight-current-row
            :header-cell-style="{
              color: '#666666',
              textAlign: 'center',
              height: '30px',
              borderColor: '#dddddd',
            }"
            :cell-style="{ textAlign: 'center' }"
            :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
            height="100%"
            style="width: 100%"
          >
            <template v-for="(item, index) in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="index"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-if="item.zidingyiState"
                :prop="item.props"
                min-width="120px"
                :width="item.props == 'xh' ? '50px' : index == '1' ? '170px' : ''"
              ></el-table-column>
            </template>
          </el-table>
        </div>
        <div class="table_pagination">
          <div class="pagination_div">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="pagesize"
              layout="jumper, prev, pager,next, sizes"
              :total="tableData.length"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      orderType="物流往来对账"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CConfiguration from '@/components/c_column/columnConfiguration1'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintStatic'
import { getAction, postAction, downPostFile } from '@/api/manage'
import { dateStrFromDate } from '@/utils/DateFormatter'
import { delcommafy } from '../../../utils'
export default {
  name: 'logisticsExchanges',
  components: {
    CConfiguration,
    dialogPrint,
  },
  computed: {
    ...mapGetters(['name']),
  },
  created () {
    // 默认获取当月时间
    this.getTimeRange(this.$setTimeRange(5))
    this.getData()
  },
  watch: {
    'queryData.isShowHcdj': {
      deep: true,
      handler () {
        let str = JSON.stringify(this.queryData)
        let arr = JSON.parse(str)
        this.requestQuery(arr)
      },
    },
  },
  data () {
    return {
      // 物流公司
      wlgsOptions: [
        {
          value: '中通',
          label: '中通',
        },
        {
          value: '圆通',
          label: '圆通',
        },
      ],
      // 经手人
      jsrOptions: [
        {
          value: '张三',
          label: '张三',
        },
        {
          value: '王五',
          label: '王五',
        },
      ],
      // 过滤记录
      gljlOptions: [
        {
          value: '全部显示',
          label: '全部显示',
        },
        {
          value: '部分显示',
          label: '部分显示',
        },
      ],
      // 查询条件数据
      queryData: {
        // 直接触发
        isShowHcdj: false,
        //搜索框值
        searchValue: '',
        // 筛选
        wlgs: '',
        jsr: '',
        wldh: '',
        gljl: '',
        // 日期选择范围
        dateRange: {
          startDate: '',
          endData: '',
        },
      },
      // 月份选择
      monthValue: '本月',
      monthOptions: [
        {
          value: '今日',
          label: '今日',
        },
        {
          value: '本周',
          label: '本周',
        },
        {
          value: '本月',
          label: '本月',
        },
        {
          value: '本年',
          label: '本年',
        },
      ],
      isShowDate: true, // 是否显示选择时间组件
      nowDate: [],
      // 表格数据
      tableData: [],
      newColumnData: [], //修改后的列数据
      // 列配置数据
      columnData: [
        {
          morenName: '序号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: true,
          props: 'xh',
        },
        {
          morenName: '单据日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'djrq',
        },
        {
          morenName: '单据类型',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'djlx',
        },
        {
          morenName: '客户',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'kh',
        },
        {
          morenName: '业务员',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'ywy',
        },
        {
          morenName: '仓库',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'ck',
        },
        {
          morenName: '商品编号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'spbh',
        },
        {
          morenName: '商品名称',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'spmc',
        },
        {
          morenName: '规格',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'gg',
        },
        {
          morenName: '单位',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'dw',
        },
        {
          morenName: '数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'sl',
        },
        {
          morenName: '单价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'dj',
        },
        {
          morenName: '折扣率',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'zkl',
        },
        {
          morenName: '折扣单价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'zdzr',
        },
        {
          morenName: '税率',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'sl',
        },
        {
          morenName: '税后单价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'shdj',
        },
        {
          morenName: '税额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'se',
        },
        {
          morenName: '金额小计',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'jexj',
        },
        {
          morenName: '成本单价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'cbdj',
        },
        {
          morenName: '成本金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'cbje',
        },
        {
          morenName: '销售毛利',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'xsml',
        },
        {
          morenName: '毛利率',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'mll',
        },
        {
          morenName: '零售价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'lsj',
        },
        {
          morenName: '赠品',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'zp',
        },
        {
          morenName: '单据状态',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'djzt',
        },
        {
          morenName: '制单人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'zdr',
        },
        {
          morenName: '制单日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'zdrq',
        },
        {
          morenName: '备注',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'remarks',
        },
        {
          morenName: '附记',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'fj',
        },
      ],
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      updateId: '', // 修改列配置时返回的id
    }
  },
  mounted () {
    this.selectTitle()
  },
  methods: {
    // 初始化查询列配置值
    async selectTitle () {
      let obj = await this.$setColumn.selectColumn('物流往来对账')
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn('物流往来对账', this.columnData, 0, this.updateId)
        this.updateId = id
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn (value) {
      this.columnData = value
      let id = await this.$setColumn.addColumn('物流往来对账', this.columnData, 1, this.updateId)
      this.updateId = id
    },
    // 导出
    exportExcel () {
      downPostFile('导出物流往来对账查询接口', '物流往来对账', {
        lists: this.columnData,
        obj: this.queryData,
      })
    },
    // 获取数据
    getData () {
      for (let i = 0; i < 30; i++) {
        this.tableData.push({
          id: i + 1,
          xh: i + 1,
          djrq: '2021.09.13',
          djlx: '已审核',
          kh: '象海科技',
          ywy: '张三',
          ck: '主仓库',
          spbh: 'GYS10010',
          spmc: '电脑',
          gg: '100*100',
          dw: '台',
          sl: 8000.0,
          dj: 12520.0,
          zkl: 2000.0,
          zkdj: 12000.0,
          sl: '40%',
          shdj: '500',
          se: 8800,
          jexj: 9800,

          cbdj: 12520.0,
          cbje: 2000.0,
          xsml: 12000.0,
          mll: 8000.0,
          lsj: 8800,
          zp: 9800,
          djzt: 'true',
          zdr: 12000.0,
          zdrq: 8000.0,
          remarks: '12520.0',
          fj: 2000.0,
        })
      }
    },
    // 刷新
    onRefresh () {
      Object.assign(this.$data, this.$options.data())
      this.getData()
      let str = JSON.stringify(this.queryData)
      let arr = JSON.parse(str)
      this.requestQuery(arr)
      this.monthValue = '本月'
      this.getTimeRange(this.$setTimeRange(5))
    },
    // 查询
    onQuery () {
      let str = JSON.stringify(this.queryData)
      let arr = JSON.parse(str)
      arr.dateRange.startDate = arr.dateRange.startDate + ' 00:00:00'
      arr.dateRange.endData = arr.dateRange.endData + ' 23:59:59'
      let obj = {
        ...arr,
      }
      this.requestQuery(obj)
    },
    // 请求筛选条件数据
    requestQuery (obj) {
      console.log(obj, '请求')
    },
    // 判断当前选择时间段
    changeDate (val) {
      this.isShowDate = true
      switch (val) {
        case '全部':
          this.isShowDate = false
          break
        case '今日':
          this.getTimeRange(this.$setTimeRange(1))
          break
        case '昨天':
          this.getTimeRange(this.$setTimeRange(2))
          break
        case '本周':
          this.getTimeRange(this.$setTimeRange(3))
          break
        case '上周':
          this.getTimeRange(this.$setTimeRange(4))
          break
        case '本月':
          this.getTimeRange(this.$setTimeRange(5))
          break
        case '上月':
          this.getTimeRange(this.$setTimeRange(6))
          break
        case '本年':
          this.getTimeRange(this.$setTimeRange(7))
          break
        case '去年':
          this.getTimeRange(this.$setTimeRange(8))
          break
        default:
          break
      }
    },
    // 获取时间范围并设置
    getTimeRange (data) {
      this.nowDate = [data.now, data.end]
      this.queryData.dateRange.startDate = data.now
      this.queryData.dateRange.endData = data.end
    },
    // 获取当前选中时间
    onClickPicker (val) {
      this.queryData.dateRange.startDate = val[0]
      this.queryData.dateRange.endData = val[1]
    },
    // 类别信息取消按钮触发
    onCancelTree () {
      this.showNewTree = false
    },
    // 触发列配置弹框
    onShowColumn () {
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 合计列计算
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.tableData.length + '条明细'
        } else {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = this.$formatMoney(sums[index])
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    },
    // 获取每页几条数据
    handleSizeChange (val) {
      this.pagesize = val
    },
    // 获取当前第几页
    handleCurrentChange (val) {
      this.currentPage = val
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}
.info_operation_btn {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  ::v-deep .el-button {
    width: 1rem;
    height: 0.55rem;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    // font-size: 0.225014rem;
    font-size: 0.2rem;
    border-radius: 0.093756rem;
    border: none;
    margin-right: 0.112507rem;
    margin-left: 0;
  }
  .el-button--default {
    color: #666;
  }
  ::v-deep .el-select {
    width: 1rem;
    height: 0.55rem;
    box-sizing: border-box;
    margin-right: 0.112507rem;
    .el-input {
      .el-input__inner {
        height: 0.55rem;
        border: none;
        font-size: 0.2rem;
      }
      .el-input__suffix {
        height: 0.55rem;
        display: flex;
        align-items: center;
      }
    }
  }
  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    p {
      font-size: 0.2rem;
      color: #666;
      margin: 0 0.093756rem 0 0.187512rem;
    }
    ::v-deep .el-checkbox {
      display: flex;
      align-items: center;
      margin-left: 0.168761rem;
      .el-checkbox__input {
        height: 0.25rem;
      }
      .el-checkbox__label {
        font-size: 0.2rem;
        padding-left: 0.093756rem;
        color: #666;
      }
      .is-checked {
        .el-checkbox__inner {
          background: #1a93fa;
          border-color: #1a93fa;
        }
      }
    }
  }
  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .el-input {
      width: 4.725295rem;
      height: 0.55rem;
      margin-right: 0.112507rem;
      ::v-deep .el-input__inner {
        height: 0.55rem;
        border: none;
        box-sizing: border-box;
        padding: 0 0.150009rem;
        background: #fff;
        font-size: 0.2rem;
        color: #666;
        &::placeholder {
          font-size: 0.2rem;
          color: #c1c1c1;
        }
      }
    }
    .el-button {
      width: 1rem;
    }
    .set_up {
      font-size: 0.35rem;
      color: rgb(153, 153, 153);
    }
  }
}
.info_content_div {
  width: 100%;
  height: calc(100% - 1rem);
  background: #fff;
  box-sizing: border-box;
  padding: 0 0.168761rem;
  display: flex;
  .div_table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .div_screen {
      width: 100%;
      height: 1.6rem;
      display: flex;
      justify-content: space-between;
      ::v-deep .el-select {
        width: 2.250141rem;
        height: 0.55rem;
        box-sizing: border-box;
        border-radius: 4px;
        .el-input {
          .el-input__inner {
            height: 0.55rem;
            border-color: #e3e3e3;
            font-size: 0.2rem;
            padding-left: 0.150009rem;
          }
          .el-input__suffix {
            height: 0.55rem;
            display: flex;
            align-items: center;
          }
        }
      }
      input {
        width: 2.250141rem;
        height: 0.55rem;
        background: #ffffff;
        border: 1px solid #e3e3e3;
        opacity: 1;
        border-radius: 4px;
        font-size: 0.2rem;
        color: #666;
        box-sizing: border-box;
        padding: 0 0.150009rem;
        &:focus {
          outline: none;
          border-color: #1890ff;
        }
      }
      .screen_left {
        // (50+5+120+15)*4=760px
        width: 14.250891rem;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        > div {
          width: 3.281455rem;
          height: 0.55rem;
          margin-top: 0.25rem;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          margin-right: 0.25rem;
          > p {
            margin: 0;
            width: 1rem;
            margin-right: 0.093756rem;
            font-size: 0.225rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
            text-align: justify;
            text-justify: distribute-all-lines; /*ie6-8*/
            text-align-last: justify; /* ie9*/
            -moz-text-align-last: justify; /*ff*/
            -webkit-text-align-last: justify; /*chrome 20+*/
          }
        }
        .left_span {
          width: 100%;
          height: 0.55rem;
          > span {
            font-size: 0.25rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666;
            &:nth-child(even) {
              font-size: 0.45rem;
              font-weight: 600;
              margin-right: 0.375023rem;
            }
            &:last-child {
              color: #fd6c21;
            }
          }
        }
      }
      .screen_right {
        // (50+5+120+15)*4=760px
        width: calc(100% - 14.250891rem);
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        box-sizing: border-box;
        padding-top: 0.25rem;
        ::v-deep .el-button {
          width: 1rem;
          height: 0.55rem;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.2rem;
          border-radius: 0.093756rem;
          border: none;
        }
        ::v-deep .el-select {
          width: 1rem;
          margin-right: 0.112507rem;
        }
        // .date_picker_style {
        //   width: 3.375211rem;
        //   height: 0.55rem;
        //   background: #ffffff;
        //   border: 1px solid #d9d9d9;
        //   opacity: 1;
        //   border-radius: 0.075005rem;
        //   position: relative;
        //   display: flex;
        //   align-items: center;
        //   justify-content: space-between;
        //   box-sizing: border-box;
        //   padding: 0.093756rem;
        //   margin-right: 0.112507rem;
        //   position: relative;
        //   p {
        //     width: 100%;
        //     height: 0.55rem;
        //     margin: 0;
        //     font-size: 0.018751rem;
        //     color: #666;
        //     font-family: HelveticaNeue;
        //     color: #666666;
        //     line-height: 0.55rem;
        //   }
        //   i {
        //     font-size: 0.25rem;
        //     color: #d9d9d9;
        //   }
        //   ::v-deep .el-date-editor {
        //     width: 3.375211rem;
        //     height: 0.55rem;
        //     opacity: 0;
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     z-index: 2001;
        //     .el-range-input {
        //       font-size: 0.2rem;
        //     }
        //     .el-range-separator {
        //       line-height: 0.55rem;
        //       font-size: 0.2rem;
        //     }
        //   }
        // }
        ::v-deep .el-date-editor {
          width: 3.375211rem;
          height: 0.55rem;
          background: #ffffff;
          border: 1px solid #d9d9d9;
          margin-right: 0.112507rem;
          padding: 3px 6px;
          .el-range__icon {
            position: absolute;
            right: 0;
            line-height: 30px;
          }
          .el-range-separator {
            line-height: 24px;
          }
          .el-range-input {
            font-size: 12px;
          }
          .el-range__close-icon {
            display: none;
          }
        }
      }
    }
    .table_content {
      // height: calc(100% - 1rem - 1.875117rem);
      height: calc(100% - 1rem - 1.6rem - 0.25rem);
      margin-top: 0.25rem;
      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;
        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;
          .cell {
            height: 0.55rem;
            display: flex;
            align-items: center;
            font-size: 0.2rem;
          }
          &:first-child {
            .cell {
              justify-content: center;
              padding: 0;
            }
          }
        }
        th {
          .cell {
            background: #ededed;
            justify-content: center;
          }
        }
        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }
        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }
        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }
        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }
    .table_pagination {
      width: 100%;
      height: 1rem;
      box-sizing: border-box;
      padding: 0.168761rem 0;
      display: flex;
      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        ::v-deep .el-pagination {
          padding: 0;
          height: 0.525033rem;
          .el-pagination__sizes {
            margin: 0;
            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>